<template>
    <el-card class="box-card">
        <div class="card-desc-header">
            <span class="card-title">角色权限分配</span>
            <span class="page-right">
                <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange"
                    class="mr-1">全选</el-checkbox>
                <auth-button @click="saveAll" :disabled="isDisabled"   size="small" text="保存" plain class="add-data" :route_name="'/sys/role/setRoleRules'"></auth-button>
            </span>
        </div>
        <div class="card-body">
            <el-checkbox-group v-model="gRules" name="checkboxgroup" @change="handleCheckedRuleChange"
                style="width: 100%">
                <el-row v-for="item in ruleList" :key="item.ID" :gutter="20"
                    style="border-left: 1px dashed #b3b4b6;border-right: 1px dashed #b3b4b6;border-top: 1px dashed #b3b4b6">
                    <el-col :span="3">
                        <el-checkbox size="small" :key="item.ID" :label="item.ID" :value="item.ID"
                            :disabled="gRules.indexOf(item.ID) == -1 && groupInfo.pid > 0">
                            <span class="text-sm">{{ item.title }}</span>
                        </el-checkbox>
                    </el-col>
                    <el-col :span="21" style="padding-left: 20px;border-left: 1px dashed #b3b4b6;">
                        <el-row v-for="item_c in item.children" :key="item_c.ID" :gutter="20">
                            <el-col :span="4">
                                <el-checkbox size="small" :key="item_c.ID" :label="item_c.ID" :value="item_c.ID"
                                    :disabled="gRules.indexOf(item_c.ID) == -1 && groupInfo.pid > 0">
                                    <span class="text-sm">{{ item_c.title }}</span>
                                </el-checkbox>
                            </el-col>
                            <el-col :span="20"
                                style="padding-left: 20px;border-left: 1px dashed #b3b4b6;border-bottom: 1px dashed rgb(179, 180, 182);"
                                v-if="item_c.children">
                                <el-row :gutter="20">
                                    <el-col :span="8" v-for="item_cc in item_c.children" :key="item_cc.ID"
                                        style="padding: 5px;">
                                        <el-checkbox :key="item_cc.ID" :label="item_cc.ID" :value="item_cc.ID"
                                            :disabled="gRules.indexOf(item_cc.ID) === -1 && groupInfo.pid > 0"
                                            size="small">
                                            <span v-if="item_cc.is_menu == 1"><span class="text-sm">{{ item_cc.title
                                                    }}</span><el-tag size="small" type="info"
                                                    effect="plain">菜单</el-tag></span>
                                            <span v-if="item_cc.is_menu == 2"><span class="text-sm">{{ item_cc.title
                                                    }}</span><el-tag size="small" type="warning"
                                                    effect="plain">节点</el-tag></span>
                                            <span v-if="item_cc.is_menu == 3"><span class="text-sm">{{ item_cc.title
                                                    }}</span><el-tag size="small" type="success"
                                                    effect="plain">接口</el-tag></span>
                                        </el-checkbox>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-checkbox-group>
        </div>
    </el-card>
</template>
<script>
import AuthButton from "../../components/AuthButton.vue"
import { toRefs, reactive } from 'vue'
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { getRoleDetail, setRoleRules, getRoleRules } from "~/api/role"
import { getRuleList, getAllRule } from "~/api/rule"
import { toast } from "~/composables/util"

export default {
  components: { AuthButton },
    setup() {
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const state = reactive({
            ruleForm: {
                name: "",
            },
            body_loading: false,
            save_loading: false,
            id: "",
            rules: {
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ]
            },
            ruleList: [],
            gRules: [],
            searchForm: {
                title: ""
            },
            currentPage: 1,
            groupInfo: {},
            ruleForm: {},
            checkAll: false,
            isIndeterminate: true,
            isDisabled: false,
            allRuleIds: [],
        });
        // 获取All权限信息
        const getAllRuleLists = (params) => {
            getAllRule(parseInt(params))
                .then(res => {
                    if (res.code == 200) {
                        let ruleData = res.data.rules || [];
                        ruleData.every(function (item) {
                            state.allRuleIds.push(item.ID);
                            return true;
                        });
                    } else {
                        toast(res.msg, 'error')
                    }
                })
        };
        const getDetail = (params) => {
            getRoleDetail(parseInt(params))
                .then(res => {
                    if (res.code == 200) {
                        state.ruleForm = res.data.Role_info
                        state.groupInfo = res.data.Role_info
                    } else {
                        toast(res.msg, 'error')
                    }
                })
        };
        //获取功能列表
        const getRuleLists = () => {
            getRuleList(state.currentPage, 10, state.searchForm.title)
                .then(res => {
                    if (res.code == 200) {
                        state.ruleList = res.data.list
                    } else {
                        toast(res.msg, 'error')
                    }
                })
        };
        //获取某个角色全部功能列表
        const getGroupRuleListIds = (params) => {
            getRoleRules(parseInt(params))
                .then(res => {
                    if (res.code == 200) {
                        state.gRules = res.data.roles
                    } else {
                        toast(res.msg, 'error')
                    }
                })
        };

        const handleCheckAllChange = (val) => {
            state.gRules = val ? state.allRuleIds : [];
            state.isIndeterminate = false;
        };

        const handleCheckedRuleChange = (value) => {
            const checkedCount = value.length;
            state.checkAll = checkedCount === state.allRuleIds.length;
            state.isIndeterminate = checkedCount > 0 && checkedCount < state.allRuleIds.length;
        };
        //保存权限分配
        const saveAll = () => {
            state.body_loading = true;
            state.save_loading = true;
            setRoleRules(state.groupInfo.role_id,state.gRules)
                .then(res => {
                    state.body_loading = false;
                    state.save_loading = false;
                    if (res.code == 200) {
                        toast(res.msg)
                        getDetail();
                    } else {
                        toast(res.msg, 'error')
                    }
                })
        }
        getAllRuleLists()
        getDetail(route.query.id)
        getGroupRuleListIds(route.query.id)
        getRuleLists()
        return {
            ...toRefs(state),
            saveAll,
            handleCheckedRuleChange,
            handleCheckAllChange
        }
    }
};




</script>
